<template>
	<!-- 首页 -->
	<view class="box">
		<view class="boxitem" style="color: orangered;" @click="choosesubject()">
			{{subject}}
		</view>
		<hr>
		<view class="boxitem" style="color: green;" @click="choosetype()">
			{{type}}
		</view>
		<button v-if="!isTestpaper" type="primary" @click="navTo(0)">继续</button>
		<button v-if="!isTestpaper" plain @click="navTo(1)">新建</button>
		<button v-if="isTestpaper" type="primary" @click="navToList()">选择试卷</button>
		<view v-if="!isTestpaper" class="num" @click="choosenum">题目数量：<text>{{num}}</text></view>
	</view>
</template>

<script>
	import { getsubjectlist, getgrouprecord } from '../../apis/questionAPI.js'
	export default {
		data() {
			return {
				subjects: [],
				subject: '历史',
				types: ['练习','组卷','试卷'],
				type: '练习',
				nums: [3,5],
				num: 3,
				isTestpaper: false
			}
		},
		onLoad() {
			if (this.$store.state.subjectlist.length !== 0) {
				this.subjects = this.$store.state.subjectlist
			} else {
				getsubjectlist().then(res => {
					let arr = []
					for (let i=0; i<res.subjectlist.length; i++) {
						arr.push(res.subjectlist[i].subject)
					}
					this.subjects = arr
				})
			}
		},
		methods: {
			// 跳转做题
			navTo(isnew) {
				let that = this
				if (this.type == '组卷') {
					getgrouprecord({
						username: uni.getStorageSync('token'),
						subject: this.subject
					}).then(res => {
						if (!res.isExist || isnew == 1) {
							uni.navigateTo({
								url: `/pages/newgroup/newgroup?subject=${that.subject}`
							})
						} else {
							uni.navigateTo({
								url: `/pages/exercise/exercise?type=${that.type}&subject=${that.subject}&num=${that.num}&isnew=${isnew}`
							})
						}
					})
				} else {
					uni.navigateTo({
						url: `/pages/exercise/exercise?type=${that.type}&subject=${that.subject}&num=${that.num}&isnew=${isnew}`
					})
				}
			},
			// 跳转试卷
			navToList () {
				uni.navigateTo({
					url: `/pages/list/list?type=${this.type}&subject=${this.subject}`
				})
			},
			// 选择科目
			choosesubject() {
				let that = this
				uni.showActionSheet({
					itemList: this.subjects,
					success: function (res) {
						that.subject = that.subjects[res.tapIndex]
						// console.log(res)
					},
					// fail: function (res) {
					// 	console.log(res.errMsg);
					// }
				})
			},
			// 选择做题类型
			choosetype() {
				let that = this
				uni.showActionSheet({
					itemList: this.types,
					success: function (res) {
						that.type = that.types[res.tapIndex]
						if (that.types[res.tapIndex] == '试卷') {
							that.isTestpaper = true
						} else {
							that.isTestpaper = false
						}
						// console.log(res)
					},
					// fail: function (res) {
					// 	console.log(res.errMsg);
					// }
				})
			},
			// 选择题目数量
			choosenum() {
				let that = this
				uni.showActionSheet({
					itemList: this.nums,
					success: function (res) {
						that.num = that.nums[res.tapIndex]
						// console.log(res)
					},
					// fail: function (res) {
					// 	console.log(res.errMsg);
					// }
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.box{
		box-sizing: border-box;
		text-align: center;
		width: 94vw;
		background-color: #f8f8f8;
		padding: 1vh 3vw;
		margin: 10vh auto;
		border: 1px solid rgba(0,0,0,.2);
		border-radius: 10px;
		
		.boxitem {
			height: 12vh;
			line-height: 12vh;
			font-size: 5vh;
			font-weight: bold;
		}
		
		button {
			margin: 2vh 0;
		}
		
		.num {
			width: 40vw;
			line-height: 6vh;
			background-color: #f8f8f8;
			position: absolute;
			bottom: 15vh;
			left: 50%;
			transform: translateX(-50%);
			border: 1px solid rgba(0,0,0,.2);
			border-radius:  3vh;
			
			text {
				font-weight: bold;
				color: blue;
			}
		}
	}
</style>
